<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YourWare - AI驱动的无代码开发平台</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 1.5rem;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(224, 231, 255, 0) 0%, rgba(224, 231, 255, 0.8) 50%, rgba(224, 231, 255, 0) 100%);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.8;
            margin: 0.2rem 0.5rem 0 0;
            color: #6366f1;
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                        <span class="block">用AI构建你的</span>
                        <span class="block">梦想应用</span>
                    </h1>
                    <p class="text-xl md:text-2xl opacity-90 mb-8">YourWare - 无需代码，AI驱动的应用开发平台</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#" class="bg-white text-indigo-600 hover:bg-indigo-50 font-semibold py-3 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105 shadow-md">立即体验</a>
                        <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 font-semibold py-3 px-6 rounded-lg text-lg transition duration-300">观看演示</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI应用开发" class="rounded-xl shadow-2xl border-4 border-white border-opacity-20">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">突破技术障碍</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">专为创业者、产品经理和创意人士设计，让您的想法快速变为现实</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-indigo-100 text-indigo-600">
                        <i class="fas fa-robot text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI辅助创建</h3>
                    <p class="text-gray-600">通过简单描述您的需求，AI自动生成完整的网页应用</p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-purple-100 text-purple-600">
                        <i class="fas fa-sliders-h text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">可视化编辑</h3>
                    <p class="text-gray-600">直观的拖放界面，轻松自定义应用设计和功能</p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-pink-100 text-pink-600">
                        <i class="fas fa-database text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据集成</h3>
                    <p class="text-gray-600">内置数据管理功能，轻松创建数据结构</p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-rocket text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-3">一键部署</h3>
                        <p class="text-gray-600">即时发布应用至云端，获取可分享的URL</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Divider -->
    <div class="section-divider my-12"></div>

    <!-- Product Showcase -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">释放您的创造力</h2>
                    <p class="text-gray-600 mb-6 drop-cap">YourWare彻底改变了应用开发方式。无需任何编程知识，您可以在几分钟内将想法转化为功能性应用。我们的AI技术不仅简化了开发过程，还确保了应用的性能和可靠性。</p>
                    <p class="text-gray-600 mb-6">无论您是想验证商业想法的创业者，还是需要快速原型的产品经理，YourWare都能帮助您突破技术障碍，专注于创意本身。</p>
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-700">零代码，零学习曲线</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-700">生成高质量、高性能的应用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-700">自动响应式设计，适配所有设备</span>
                        </li>
                    </ul>
                    <a href="#" class="inline-flex items-center text-indigo-600 font-semibold hover:text-indigo-800 transition">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="md:w-1/2">
                    <div class="relative">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-indigo-100 rounded-lg opacity-50 z-0"></div>
                        <div class="relative z-10 bg-white p-2 rounded-lg shadow-xl border border-gray-100">
                            <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="YourWare界面" class="rounded-lg">
                        </div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-100 rounded-lg opacity-50 z-0"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">适用场景</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">满足不同角色的创新需求</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-lightbulb text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">创业者</h3>
                    </div>
                    <p class="text-gray-700">快速构建MVP验证商业想法，无需等待开发团队或投入大量资金，让您能够快速测试市场反应并迭代产品。</p>
                </div>

                <div class="bg-purple-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">产品经理</h3>
                    </div>
                    <p class="text-gray-700">将产品概念直接转化为可交互的原型，极大提升与开发团队和利益相关者的沟通效率，加速产品开发周期。</p>
                </div>

                <div class="bg-pink-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-paint-brush text-pink-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">创意人员</h3>
                    </div>
                    <p class="text-gray-700">为那些具有创意但缺乏技术资源的人提供工具，让您可以将想法变为现实，不再因技术障碍而搁置创意。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Divider -->
    <div class="section-divider my-12"></div>

    <!-- Data Visualization -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">工作原理</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">AI如何将您的描述转化为功能性应用</p>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="mermaid">
                    graph TD
                    A[输入应用描述] --> B[AI分析需求]
                    B --> C[生成数据结构]
                    B --> D[设计用户界面]
                    C --> E[创建数据库模型]
                    D --> F[生成前端组件]
                    E --> G[构建应用逻辑]
                    F --> G
                    G --> H[测试应用功能]
                    H --> I[一键部署]
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-indigo-600 text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开启您的无代码之旅了吗？</h2>
            <p class="text-xl mb-8 opacity-90">立即注册，3分钟内创建您的第一个应用</p>
            <a href="#" class="inline-block bg-white text-indigo-600 hover:bg-indigo-50 font-semibold py-4 px-8 rounded-lg text-lg transition duration-300 transform hover:scale-105 shadow-lg">免费开始使用</a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 微交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
            });
        });
    </script>
</body>
</html>